<template>
    <div>
        <div class="chooseTime">
            <div class="TiemList">
                <p>开始时间:</p>
                <el-date-picker v-model="value1" type="date" placeholder="选择日期" size="mini" style="width: 50%;">
                </el-date-picker>
            </div>
            <div class="TiemList">
                <p>结束时间:</p>
                <el-date-picker v-model="value1" type="date" placeholder="选择日期" size="mini" style="width: 50%;">
                </el-date-picker>
            </div>
        </div>
        <div class="chooseTime" style="height: 52px;">
            <p class="chooseTime-tips">模型训练时长 - 总量 ： 16000小时</p>
        </div>
        <div class="main" id="main" ref="MS"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { debounce } from "@/utils/index";
export default {
    data() {
        return {
            myChart: '',
            value1: '',
            option: {
                grid: {
                    left: 0,
                    right: 0,
                    top: 12,
                    bottom: 0,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            },
        }
    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    methods: {
        checkResize() {
            const el = this.$refs.MS; // 假设你有一个ref指向盒子元素  
            const width = el.offsetWidth;
            const height = el.offsetHeight;
            if (width !== this.previousWidth || height !== this.previousHeight) {
                this.previousWidth = width;
                this.previousHeight = height;
                console.log('盒子尺寸变化了:', { width, height })
                this.myChart.resize();
            }

        }
    },
    created() {

    },
    beforeDestroy() {
        window.removeEventListener('resize', debounce(this.checkResize, 300));
    },
    mounted() {
        window.addEventListener('resize', debounce(this.checkResize, 300));
        var chartDom = document.getElementById('main');
        this.myChart = echarts.init(chartDom, null, {
            renderer: 'svg'
        });
        this.myChart.setOption(this.option);
    },
}
</script>

<style scoped>
.main {
    width: 100%;
    height: 260px;
}

.chooseTime {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: space-between;
}

.TiemList {
    width: 46%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.TiemList p {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    color: #7f7f7f;
}

.chooseTime-tips {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 18px;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;

}
</style>
